<!DOCTYPE html><html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type">
	<title>Nomina Anatomica Search</title>
	<script type="text/javascript" src="javascript/jquery.js"></script>
  <script type="text/javascript" src="javascript/jquery.autocomplete.js"></script>
	<link rel="stylesheet" href="css/jquery.autocomplete.css" type="text/css" />
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	
</head>
<body>

<form onsubmit="return false;" action="">
	<fieldset>
	<legend><img src="media/medical-s.jpg" class="flag-img" /></legend>
	<input type="checkbox" name="name_na" value="na" id="lang-na" checked  /><img src="media/medical-s.jpg" class="flag-img" /> &nbsp;&nbsp;
	<input type="checkbox" name="name_en"  value="en" id="lang-en" checked  /><img src="media/usa.jpg" class="flag-img" /> &nbsp;&nbsp;
	<input type="checkbox" name="name_ro"  value="ro" id="lang-ro" unchecked  /><img src="media/romania.jpg" class="flag-img" /> &nbsp;&nbsp;
	
		<input type="text" class="nomina-search" value="" id="CityAjax" class="ac_input"/>
		<input type="hidden" onclick="lookupAjax();" value="Get Value"/>
	
	</fieldset>
	
<p></p>
<p></p>
<fieldset>
	<legend><div id="title" class="title_nomina"><img src="media/medical-s.jpg" class="flag-img" /> Nomina Anatomica Search</div></legend>
	
	<h1><div id="title" class="title_en"></div></h1>
	<div class="description_en">Begin by typing into the search field at least 3 characters. The database will be searched and the possible entries will be presented in a selectable list. Choose the entry of interest for a more detailed description.</div>
	<h1><div id="title" class="title_ro"></div></h1>
	<div class="description_ro"></div>
	<p>
	<div class="term_id"></div>
	</p>
	</fieldset>
	</form>
<p>	
For changing a DB entry or adding a new one, please use <a href="https://spreadsheets0.google.com/viewform?hl=en&formkey=dDNuTzZxLWduRTZFRzlETlljMFMxd2c6MQ#gid=0" target="form">this form</a>.
</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>


<script type="text/javascript">
  function findValue(li) {
  	if( li == null ) return alert("No match!");

  	// if coming from an AJAX call, let's use the CityId as the value
  	if( !!li.extra ) var sValue = li.extra[0];

  	// otherwise, let's just display the value in the text box
  	else var sValue = li.selectValue;

  	//alert("The value you selected was: " + sValue);
  	displayTerm(sValue);
  }

  function selectItem(li) {
    	findValue(li);
  }

  function formatItem(row) {
    	return row[0] + " (id: " + row[1] + ")";
  }

  function lookupAjax(){
  	var oSuggest = $("#CityAjax")[0].autocompleter;
  	
    oSuggest.findValue();
  	return false;
  }

  function lookupLocal(){
    	var oSuggest = $("#CityLocal")[0].autocompleter;

    	oSuggest.findValue();

    	return false;
  }
  
  function displayTerm(id) {
	$.ajax({
		url: 'autocomplete.php?key='+id,
		success: function(data) {
			var rows = data.split("|");
			$('.title_nomina').html('<img src="media/medical-s.jpg" class="flag-img" /> &nbsp;' + rows[0]+": "+rows[5]);
			$('.title_en').html('<img src="media/usa.jpg" class="flag-img" /> &nbsp;' + rows[1]);
			$('.description_en').html(rows[2]);
			$('.title_ro').html('<img src="media/romania.jpg" class="flag-img" /> &nbsp;' +rows[3] +' (tr.:'+rows[6]+')');
			$('.description_ro').html(rows[4]);
			$('.term_id').html("id: "+rows[5]);
			//alert('Load was performed.');
		}
		});
  }
  
  
  
    $("#CityAjax").autocomplete(
      "autocomplete.php",
      {
  			delay:10,
  			minChars:3,
  			matchSubset:1,
  			matchContains:1,
  			cacheLength:10,
  			onItemSelect:selectItem,
  			onFindValue:findValue,
  			formatItem:formatItem,
  			autoFill:true
  		}
    );
    

  
</script>
</body>
</html>